<template name="tab-bar">
	<view class="tab-bar uni-flex">
		<view :key="index" v-for="(item,index) in tabBarList" @click="switchTab(index)" :class="tabIndex==index?'active':''" class="tab-bar-item uni-flex uni-flex-item uni-column">
			<img class="menu-icon" v-if="tabIndex==index" :src="item.active_icon" alt="">
			<img class="menu-icon" v-else :src="item.normal_icon" alt="">
			<p class="menu-name">{{item.name}}</p>
		</view>
	</view>
</template>

<script>
	export default {
		name:"tab-bar",
		props: {
			tabIndex: {
				type: Number,
				default: 0
			}
		},
		data() {
			return {
				tabBarList:[
					{
						name:'首页',
						url:'/pages/index/index',
						normal_icon:require('./images/index.svg'),
						active_icon:require('./images/index_p.svg')
					},
					{
						name:'集团管理',
						url:'/pages/groupmanage/groupmanage',
						normal_icon:require('./images/group.svg'),
						active_icon:require('./images/group_p.svg')
					},
					{
						name:'个人中心',
						url:'/pages/ucenter/ucenter',
						normal_icon:require('./images/ucenter.svg'),
						active_icon:require('./images/ucenter_p.svg')
					}
				]
			};
		},
		methods:{
			switchTab(index){
				uni.switchTab({
					url: this.tabBarList[index].url,
				});
			}
		}
	}
</script>

<style lang="scss">
	.tab-bar{
		position: fixed;
		width: 100%;
		left: 0;
		bottom: 0;
		z-index: 9;
		height: 98rpx;
		background: rgb(255, 255, 255);
		box-shadow: 0px -3rpx 6rpx rgba(0, 0, 0, 0.1);
		.tab-bar-item{
			width: 33.4%;
			justify-content: center;
			align-items: center;
			cursor: pointer;
			outline: none;
			.menu-icon{
				width: 40rpx;
				height: 40rpx;
			}
			.menu-name{
				font-size: 22rpx;
				color: #666;
				text-align: center;
				height: 30rpx;
				line-height: 30rpx;
				margin-top: 7rpx;
			}
			
		}
	}
</style>
